<template>
  <div class="collection-container">
    <!-- 头部区域 -->
    <el-header height="80px" class="collection-header">
      <div class="header-content">
        <div class="header-left">
          <h2>我的收藏</h2>
          <el-text type="info" size="small">共 {{ collections.length }} 项收藏</el-text>
        </div>
        <div class="header-right">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索收藏内容..."
            :prefix-icon="Search"
            clearable
            style="width: 300px"
          />
          <el-button-group>
            <el-button :icon="Grid" :type="viewMode === 'grid' ? 'primary' : ''" @click="viewMode = 'grid'" />
            <el-button :icon="List" :type="viewMode === 'list' ? 'primary' : ''" @click="viewMode = 'list'" />
          </el-button-group>
        </div>
      </div>
    </el-header>

    <!-- 内容区域 -->
    <el-main class="collection-content">
      <!-- 空状态 -->
      <el-empty
        v-if="collections.length === 0"
        description="暂无收藏内容"
        :image-size="120"
      >
        <template #image>
          <el-icon :size="80" color="#C0C4CC"><FolderOpened /></el-icon>
        </template>
        <el-text type="info">您可以在聊天中收藏重要消息</el-text>
      </el-empty>

      <!-- 收藏列表 -->
      <div v-else class="collection-list" :class="{ 'grid-view': viewMode === 'grid' }">
        <el-card
          v-for="item in filteredCollections"
          :key="item.id"
          class="collection-item"
          shadow="hover"
          @click="viewCollection(item)"
        >
          <template #header>
            <div class="item-header">
              <div class="item-type">
                <el-icon :size="20" :color="getTypeColor(item.type)">
                  <component :is="getTypeIcon(item.type)" />
                </el-icon>
                <el-tag :type="getTypeTagType(item.type)" size="small" effect="plain">
                  {{ getTypeName(item.type) }}
                </el-tag>
              </div>
              <el-dropdown @command="handleItemAction" trigger="click">
                <el-button :icon="MoreFilled" circle size="small" text />
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item :command="{ action: 'view', item }">
                      <el-icon><View /></el-icon>
                      查看详情
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'share', item }">
                      <el-icon><Share /></el-icon>
                      分享
                    </el-dropdown-item>
                    <el-dropdown-item :command="{ action: 'delete', item }" divided>
                      <el-icon><Delete /></el-icon>
                      删除
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </template>

          <div class="item-content">
            <h4 class="item-title">{{ item.title }}</h4>
            <el-text class="item-preview" line-clamp="3">{{ item.content }}</el-text>

            <!-- 图片预览 -->
            <div v-if="item.type === 'image'" class="image-preview">
              <el-image
                :src="item.imageUrl"
                fit="cover"
                style="width: 100%; height: 120px; border-radius: 4px;"
                :preview-src-list="[item.imageUrl]"
                preview-teleported
              />
            </div>

            <!-- 文件信息 -->
            <div v-if="item.type === 'file'" class="file-info">
              <el-icon><Document /></el-icon>
              <span>{{ item.fileName }}</span>
              <el-text size="small" type="info">{{ item.fileSize }}</el-text>
            </div>
          </div>

          <template #footer>
            <div class="item-footer">
              <div class="item-meta">
                <el-text size="small" type="info">来自: {{ item.source }}</el-text>
                <el-text size="small" type="info">{{ formatTime(item.created_at) }}</el-text>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </el-main>

    <!-- 收藏详情对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      :title="selectedItem?.title"
      width="600px"
      :before-close="handleCloseDetail"
    >
      <div v-if="selectedItem" class="detail-content">
        <div class="detail-header">
          <el-tag :type="getTypeTagType(selectedItem.type)" effect="plain">
            {{ getTypeName(selectedItem.type) }}
          </el-tag>
          <el-text size="small" type="info">{{ formatTime(selectedItem.created_at) }}</el-text>
        </div>

        <div class="detail-body">
          <p>{{ selectedItem.content }}</p>

          <!-- 图片显示 -->
          <el-image
            v-if="selectedItem.type === 'image'"
            :src="selectedItem.imageUrl"
            style="width: 100%; max-height: 300px;"
            fit="contain"
          />

          <!-- 文件信息 -->
          <div v-if="selectedItem.type === 'file'" class="file-detail">
            <el-icon size="large"><Document /></el-icon>
            <div>
              <p><strong>{{ selectedItem.fileName }}</strong></p>
              <p>大小: {{ selectedItem.fileSize }}</p>
            </div>
          </div>
        </div>

        <div class="detail-footer">
          <el-text size="small" type="info">来源: {{ selectedItem.source }}</el-text>
        </div>
      </div>

      <template #footer>
        <el-button @click="showDetailDialog = false">关闭</el-button>
        <el-button type="primary" @click="shareCollection">分享</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search,
  Grid,
  List,
  FolderOpened,
  MoreFilled,
  View,
  Share,
  Delete,
  Document,
  ChatDotRound,
  Picture,
  Link
} from '@element-plus/icons-vue'

export default {
  name: 'Collection',
  data() {
    return {
      searchKeyword: '',
      viewMode: 'grid', // 'grid' 或 'list'
      showDetailDialog: false,
      selectedItem: null,
      collections: [
        // 示例数据
        {
          id: 1,
          type: 'text',
          title: '重要会议通知',
          content: '明天下午2点在会议室A召开项目进度会议，请各部门负责人准时参加。会议将讨论项目当前进展、遇到的问题以及下一步工作安排。',
          source: '工作群',
          created_at: new Date('2024-01-15 14:30:00')
        },
        {
          id: 2,
          type: 'image',
          title: '项目架构图',
          content: '系统整体架构设计图，包含前端、后端、数据库等各个模块的关系。',
          source: '技术讨论',
          imageUrl: '/images/face/face0.jpeg', // 示例图片
          created_at: new Date('2024-01-14 10:20:00')
        },
        {
          id: 3,
          type: 'file',
          title: '产品需求文档',
          content: '详细的产品功能需求说明文档，包含用户故事、功能点描述等。',
          source: '产品经理',
          fileName: '产品需求文档v2.1.docx',
          fileSize: '2.3MB',
          created_at: new Date('2024-01-13 16:45:00')
        },
        {
          id: 4,
          type: 'link',
          title: '技术文档',
          content: 'Vue 3 官方文档链接，包含最新的API参考和使用指南。',
          source: '技术分享',
          linkUrl: 'https://vuejs.org/',
          created_at: new Date('2024-01-12 09:15:00')
        }
      ],
      // Element Plus 图标
      Search,
      Grid,
      List,
      FolderOpened,
      MoreFilled,
      View,
      Share,
      Delete,
      Document,
      ChatDotRound,
      Picture,
      Link
    }
  },
  computed: {
    filteredCollections() {
      if (!this.searchKeyword) {
        return this.collections
      }
      
      const keyword = this.searchKeyword.toLowerCase()
      return this.collections.filter(item => 
        item.title.toLowerCase().includes(keyword) ||
        item.content.toLowerCase().includes(keyword) ||
        item.source.toLowerCase().includes(keyword)
      )
    }
  },
  methods: {
    // 获取类型图标
    getTypeIcon(type) {
      const icons = {
        text: ChatDotRound,
        image: Picture,
        file: Document,
        link: Link
      }
      return icons[type] || ChatDotRound
    },

    // 获取类型颜色
    getTypeColor(type) {
      const colors = {
        text: '#409EFF',
        image: '#67C23A',
        file: '#E6A23C',
        link: '#F56C6C'
      }
      return colors[type] || '#409EFF'
    },

    // 获取类型标签类型
    getTypeTagType(type) {
      const types = {
        text: 'primary',
        image: 'success',
        file: 'warning',
        link: 'danger'
      }
      return types[type] || 'primary'
    },

    // 获取类型名称
    getTypeName(type) {
      const names = {
        text: '文本',
        image: '图片',
        file: '文件',
        link: '链接'
      }
      return names[type] || '文本'
    },

    // 格式化时间
    formatTime(time) {
      return dayjs(time).format('MM-DD HH:mm')
    },

    // 查看收藏详情
    viewCollection(item) {
      this.selectedItem = item
      this.showDetailDialog = true
    },

    // 处理项目操作
    async handleItemAction(command) {
      const { action, item } = command

      switch (action) {
        case 'view':
          this.viewCollection(item)
          break
        case 'share':
          this.shareItem(item)
          break
        case 'delete':
          await this.removeCollection(item.id)
          break
      }
    },

    // 分享项目
    shareItem(item) {
      ElMessage.success(`分享功能开发中: ${item.title}`)
    },

    // 删除收藏
    async removeCollection(id) {
      try {
        await ElMessageBox.confirm(
          '确定要删除这个收藏吗？删除后无法恢复。',
          '确认删除',
          {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )

        this.collections = this.collections.filter(item => item.id !== id)
        ElMessage.success('删除成功')
      } catch {
        // 用户取消删除
      }
    },

    // 关闭详情对话框
    handleCloseDetail() {
      this.showDetailDialog = false
      this.selectedItem = null
    },

    // 分享收藏
    shareCollection() {
      ElMessage.success('分享功能开发中...')
    },

    // 添加收藏（供其他组件调用）
    addCollection(data) {
      const newCollection = {
        id: Date.now(),
        type: data.type || 'text',
        title: data.title || '收藏内容',
        content: data.content,
        source: data.source || '未知来源',
        created_at: new Date()
      }

      this.collections.unshift(newCollection)
      ElMessage.success('添加收藏成功')
    }
  }
}
</script>

<style scoped>
/* 主容器 */
.collection-container {
  height: 100vh;
  background: var(--el-bg-color-page);
}

/* 头部区域 */
.collection-header {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  padding: 0 24px;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.header-left h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 内容区域 */
.collection-content {
  padding: 24px;
}

/* 收藏列表 */
.collection-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.collection-list.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* 收藏项 */
.collection-item {
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid var(--el-border-color-lighter);
}

.collection-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 项目头部 */
.item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-type {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 项目内容 */
.item-content {
  margin-top: 12px;
}

.item-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}

.item-preview {
  margin-bottom: 12px;
  color: var(--el-text-color-regular);
  line-height: 1.5;
}

/* 图片预览 */
.image-preview {
  margin-top: 12px;
}

/* 文件信息 */
.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: var(--el-fill-color-extra-light);
  border-radius: 6px;
  margin-top: 12px;
}

/* 项目底部 */
.item-footer {
  margin-top: 12px;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 详情对话框 */
.detail-content {
  padding: 16px 0;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}

.detail-body {
  margin-bottom: 16px;
  line-height: 1.6;
}

.file-detail {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: var(--el-fill-color-extra-light);
  border-radius: 8px;
  margin-top: 16px;
}

.detail-footer {
  padding-top: 12px;
  border-top: 1px solid var(--el-border-color-lighter);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .collection-header {
    padding: 0 16px;
  }

  .header-content {
    flex-direction: column;
    gap: 16px;
    height: auto;
    padding: 16px 0;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
  }

  .header-right .el-input {
    flex: 1;
    margin-right: 16px;
  }

  .collection-content {
    padding: 16px;
  }

  .collection-list.grid-view {
    grid-template-columns: 1fr;
  }
}

/* 自定义卡片样式 */
:deep(.el-card__header) {
  padding: 16px;
  background: var(--el-fill-color-extra-light);
}

:deep(.el-card__body) {
  padding: 16px;
}

/* 下拉菜单样式 */
:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 对话框样式 */
:deep(.el-dialog__body) {
  padding: 16px 24px;
}
</style>
